<template>
    <div class="home">
        <header class="tc">
            <div class="title pr pr20 pl20" style="">
                <img @click="goRepair" class="pa" src="../../../assets/img/home-img/left-arrows.png">
                <h1 class="f35 cfff fn">附近门店</h1>
            </div>
        </header>
        <nav class="nav">
            <div class="mb65 search wrap pr">
                <input class="search bcfff w100" v-model="content" placeholder="输入需要搜索的内容" type="text">
                <a href="#">
                    <img @click="search" class="pa" src="../../../assets/img/wash-car-img/search.png">
                </a>
            </div>
           <div class="histoy ml40">
                <h1 class="cfff f20 fn">
                    <span class="f30">历史记录:</span>
                    {{ lsjl[0] }}
                </h1>
           </div>
        </nav>
        <main class="content mb20" v-for="(el,index) in this.listTable" :key="index">
            <div class="dress " >
                <ul class="pr" @click="goDetails(el,el.id)">
                    <li class="oh">
                        <h2 class="f30">{{el.name}}</h2>
                        <p class="mt15 mb30">
                            <van-icon v-for="(el,index) in el.star" :key="index" name="star" color="rgb(255,191,0)" size="20rem"></van-icon>
                            <span>{{ el.star }}分</span>
                            <span class="f25 ml30">销量:{{quantity}}</span>
                        </p>
                        <div class="fl mr20">
                            <img :src="el.idPictureBack" alt="">
                        </div>
                        <p class="mt15 f20">{{yesj1 }}</p>
                        <p class="mt15 f20">{{yesj2}}</p>
                        <p class="mt15 f20">{{el.address}}</p>
                    </li>
                    <li>
                        <p class="distance fr mb25 f15 pa">{{distance}}m</p>
                    </li>
                </ul>
            </div>
        </main>
    </div>
</template>
<script>
import { search,searchs } from '../../../api/Repair';
export default {
    data(){
        return{
            query:{
                categoryId:''
            },
            listTable:[],
            //  距离
            distance:99999,
            //  销量
            quantity:555,
            yesj1:'营业时间：周一至周五',
            yesj2:'早上8:00-晚上22:00',
            lsjl:['飞飞飞'],
            // 搜索
            content:'',
            historyArr:[],
        }
    },
    mounted(){
        this.init();
    },
    methods:{
        goRepair(){
            this.$router.push('repair')
        },
        goDetails(el,id){
            this.$router.push({
                path:'/storeDetails',query:{el,id}
            })
        },
        search(){
            if(this.content){
                searchs()
                .then(r=>{
                    console.log(r);
                    let res = r.data;
                    let dataArr = res.filter((item,value,res)=>{
                        console.log(item.name.indexOf(this.content));
                        if(item.name.indexOf(this.content)>=0){
                            return  item;
                        }
                    })
                    this.listTable = dataArr;
                    //当前搜索结果不为空则存入history
                    if(dataArr){
                        this.historyArr.push(this.content);
                    }
                    sessionStorage.setItem("historyArr",this.historyArr)
                })
            }else{
                this.init();
            }
        },
        init() {
            search({
                categoryId: 1
            })
            .then(r=>{
                this.listTable = r.data;
                // console.log(this.listTable);
            })
        },
    }
}
</script>
<style scoped>
.home{background-color: #f7f7f7;position: relative;z-index: 0;overflow: hidden;}
/* 头部样式  ---需要可剪切 */
header .title{height: 145rem;line-height: 145rem;}
header .title img{font-size: 40rem;}
header{height:435rem;background-color: #3385fd;}
header img{height: 36rem;width: auto;left: 20rem;top: 50%;margin-top: -18rem;}
.nav{margin-top: -310rem;margin-bottom: 40rem;}
.nav .search input{outline: none;border:1px solid #e7e7e7;}
.nav .search input::-webkit-input-placeholder{color: #e4e4e4;font-size: 20rem;}
.nav .search{height: 80rem;border-radius: 40rem;line-height: 30rem;padding: 25rem 40rem;box-sizing: border-box; border: none;}
.nav .search img{width: 30rem;height: auto; top: 50%;right: 80rem;transform:translateY(50%);}
.home .content{background-color:#fff;border-radius: 20rem;margin:0 20rem;}
.home .content .dress{padding: 40rem 30rem;}
.home .content .dress ul li div img{height: 120rem;width: 190rem;}
.home .content .dress ul li .distance{color: #4c80cd;right: 0;top: 0;}
.home .content .dress ul li p img{width: 20rem;height: 20rem;}
</style>